<!--KTV管理-核销订单 -->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >核销订单</el-breadcrumb-item>
        <div v-if="this.$store.state.login.user.type == 1" style="text-align: right" >
          <span style="color: red">请选择KTV</span>
          <el-select v-model="$store.state.login.shopID" clearable  @change="SelectShop()" placeholder="请选择KTV查询">
            <el-option
              v-for="item in $store.state.login.shopData"
              :key="item.shop_id"
              :label="item.name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </div>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main"> <div class="titleTxt" style="">
        <p>预定订单核销</p>
      </div>
        <el-row  style="min-height: 40px">
          <el-col  style="margin: 15px 0px 15px 18px;display: flex;" align="left">
            <span style="line-height: 32px;text-align: right;">输入订单号：</span>
            <el-input v-model="ordernum" clearable style="width: 200px;" placeholder="输入订单号" class="kz_search">
            </el-input>
            <el-button  type="primary"  @click="hx()" style="margin-left: 20px;">确定核销</el-button>
          </el-col>
        </el-row>
        <div class="titleTxt">
          <p>预定订单核销列表</p>
        </div>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="下单人昵称">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话号码">
            <template slot-scope="scope">
              <p v-if="scope.row.phone">{{scope.row.phone}}</p>
              <p v-if="!scope.row.phone">/</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="ordernum"
            label="订单号">
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="room_name"-->
            <!--label="包房名">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="people"
            label="预订人数">
          </el-table-column>
          <el-table-column
            prop="price"
            label="预订价格">
          </el-table-column>
          <el-table-column
            label="下单时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="包房类型">
            <template slot-scope="scope">
              {{pdlx(scope.row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            label="预订时间段">
            <template slot-scope="scope">
              {{scope.row.start_time}}-{{scope.row.over_time}}
            </template>
          </el-table-column>
          <el-table-column
            label="场次">
            <template slot-scope="scope">
              <div  v-if="scope.row.session_type">
                <div  v-for="item in scope.row.session_type.toString().split(',')">
                  {{pdlx2(item)}}
                </div>
              </div>
              <div  v-else>
                无
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="commodity_name"
            label="商品">
          </el-table-column>
          <el-table-column
            prop="use_time"
            label="核销时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.use_time)}}
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              {{pdlx1(scope.row.state)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="operate"
            label="核销人">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          width="150">
            <template slot-scope="scope">
              <el-button   @click="finishOrder(scope.row.order_id,3)" style="" size="small" type="text">
                结束订单
              </el-button>
              <el-button  @click="changeMes(scope.row.order_id,5)"  style="" size="small" type="text">
                取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="预定订单核销" :visible.sync="hxVisible" width="360px" :modal-append-to-body="false">
      <el-form>
        <!--<el-form-item label="包房：" :label-width="formLabelWidth" prop="user_name">-->
          <!--<span>{{hxData.room_name}}</span>-->
        <!--</el-form-item>-->
        <el-form-item label="包房类型：" :label-width="formLabelWidth" prop="user_password">
          <span>{{pdlx(hxData.type)}}</span>
        </el-form-item>
        <el-form-item label="商品：" :label-width="formLabelWidth" prop="user_account">
          <span>{{hxData.commodity_name}}</span>
        </el-form-item>
      </el-form>
      <div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitEdit()">确 定</el-button>
        <el-button @click="hxVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="取消订单" :visible.sync="addVisible" width="50%" :append-to-body="true" :modal-append-to-body="false">
      <el-input type="textarea" placeholder="请输入拒绝原因" :min="2" v-model="cancel_reason"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelOrder(1,5)">确 定</el-button>
        <el-button @click="addVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "OrderWC",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      if (this.$store.state.login.user.type == 1) {
        this.shop_id = this.$store.state.login.shopID
      }else {
        this.shop_id = this.$store.state.login.user.id
      }
      this.getstart()
    },
    data() {
      return {
        pageSizeK: 10,
        pageK: 1,
        dataTotalK: 0,
        tableDataK:[],
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        key:'',
        type:'',
        options: [
          {
            value: '1',
            label: '江南风转KTV'
          },
          {
            value: '2',
            label: '泰乐迪KTV'
          },
        ],
        tableData:[],
        hxVisible:false,
        editdata:{},
        editrules:{},
        formLabelWidth:'100px',
        hxData:[],
        ordernum:'',
        shop_id:'',
        addVisible:false,
        cancel_reason:'',
        order_id:'',
      }
    },
    methods: {
      SelectShop(){
        this.shop_id = this.$store.state.login.shopID
        this.getstart()
      },
      hx(){
        this.findOrder()
      },
      findOrder(){
        let thi = this
        const prams = {
          shop_id: thi.shop_id,
          // shop_id: 3,
          ordernum:thi.ordernum,
        }
        thi.mySelectAll('orderFind',prams).then(function (value) {
          if (value.code == 200){
            thi.hxData = value.data
            thi.hxVisible = true
          }
        })
      },
      pdlx(type){
        let dateArr = ['小包','中小包','大包','豪包',];
        return dateArr[type]
      },
      pdlx1(type){
        let dateArr = ['','未使用','进行中','','','','已超时'];
        return dateArr[type]
      },
      pdlx2(type){
        let dateArr = ['上午场','下午场','黄金场','午夜场',];
        return dateArr[type]
      },
      SubmitEdit(){
        let thi = this
        const prams = {
          order_id:thi.hxData.order_id,
          state:2,
          operate: thi.$store.state.login.user.name
        }
        thi.mySubmit('editOrderState', prams).then(function (code) {
          if (code == 200) {
            thi.hxVisible = false
            thi.getstart()
          }
        })
      },
      getstartSelect(){
        this.page = 1
        this.getstart()
      },
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          shop_id: thi.shop_id,
          key:thi.key,
        }
        thi.mySelectAll('orderList',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id, state) {
        this.order_id = id
        this.addVisible = true
      },
      //结束订单
      finishOrder(id,state) {
        let thi = this
        const por = {
          order_id: id,
          state: state,
          operate: thi.$store.state.login.user.name,
        }
        thi.mySubmit('editOrderState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
      //取消订单
      cancelOrder(id,state) {
        let thi = this
        const por = {
          order_id: thi.order_id,
          state: state,
          operate: thi.$store.state.login.user.name,
          cancel_reason: thi.cancel_reason,
        }
        console.log(por)
        thi.mySubmit('editOrderState', por).then(function (code) {
          thi.addVisible = false
          if (code == 200) {
            thi.getstart()
          }
        })
      },
      //核销订单
      submitState(id,state) {
        let thi = this
        const por = {
          id: id,
          admin_state: state,
        }
        thi.mySubmit('editOrderState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  select{
    border:none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand {
    display: none;
  }

  .titleTxt{
    font-weight: bold;
    border-left: 5px solid #409eff;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
  }
</style>
